<template>
	<view class="page">
		<Navbar iconColor="white" :showMenu="false" :showBack="true" :isDocument="false">
		</Navbar>
		
		<view class="videoBox" >
			<video v-show="mvDetail.src != ''" id="myVideo" class="video" :src="mvDetail.src"  :show-center-play-btn="false" @timeupdate="timeupdate" @fullscreenchange="fullscreenchange" loop :controls="controls">
				<cover-view class="videoCover" @click="playVideo">
				</cover-view>
				<cover-image v-if="videoStatus == 'paused'" @click="playVideo" class="coverBtn" src="/static/images/play-ws.png" mode="widthFix" :style="{top: -225 * pixelRatio / 2 - 125 + 'rpx'}"></cover-image>
				<cover-image @click="fullScreen" class="fullScreen" src="/static/images/fullScreen-w.png" mode="widthFix" :style="{top: -225 * pixelRatio / 2 - 20 + 'rpx'}"></cover-image>
			</video>
		</view>
		
		<view class="detail">
			<view class="left">
				<text style="color: #ddd;font-size: 24rpx;">{{$tools.calcPlayCount(mvDetail.playCount)}}次观看</text>
				
				<view class="title">
					<view class="t1" @click="showSubTitle = !showSubTitle">
						<text>{{mvDetail.name}}</text>
						<image v-if="mvDetail.desc != null" :src="showSubTitle ? '/static/images/top-w.png' : '/static/images/bottom-w.png'" mode="widthFix"></image>
					</view>
					<view class="t2" v-show="showSubTitle && mvDetail.desc != null">
						<text>{{mvDetail.description}}</text>
					</view>
				</view>
				
				<view class="creator">
					<image :src="mvDetail.artists[0].img1v1Url" mode="aspectFill"></image>
					<text>{{mvDetail.artists[0].name}}</text>
					<view class="attention" v-if="!mvDetail.artists[0].followed" @click="attention">
						<text>+</text>
					</view>
				</view>
				
			</view>
			<view class="right">
				<view class="right-item">
					<image :src="mvDetail.liked ? '/static/images/prised-r.png' : '/static/images/prise-sw.png'" mode="widthFix" @click="prise"></image>
					<text>{{$tools.calcPlayCount(mvDetail.subCount)}}</text>
				</view>
				<view class="right-item">
					<image src="/static/images/comment-sw.png" mode="widthFix" @click="toComment"></image>
					<text>{{$tools.calcPlayCount(mvDetail.commentCount)}}</text>
				</view>
				<view class="right-item">
					<image src="/static/images/zf.png" mode="widthFix" @click="share"></image>
					<text>{{$tools.calcPlayCount(mvDetail.shareCount)}}</text>
				</view>
				<view class="right-item">
					<image :src="isCollceted ? '/static/images/right-sw.png' : '/static/images/collect-sw.png'" mode="widthFix" @click="collectMv"></image>
					<text>收藏</text>
				</view>
				
			</view>
		</view>
		
		<!-- 进度条 -->
		<view class="playingProgress">
			<text>{{$tools.StoM(currentTime)}}</text>
			<view class="slider" @click="changeSilder">
				<u-slider v-model="playingProgress" active-color="#fff" height="4" block-width="22" @end="changeSilder"></u-slider>
			</view>
			<text>{{$tools.StoM(parseInt(mvDetail.duration/1000))}}</text>
		</view>
		
		<!-- <Loading isFullScreen :active="mvDetail.id == undefined" text="loading..." backgroundColor="#000"></Loading> -->
	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import Loading from '@/components/loading/loading.vue'
	import { mapState, mapMutations } from 'vuex'
	import {
		getMVDetail,
		getMVUrl
	} from '@/api/video.js'
	import { followSinger, priseResource, collectMv } from '@/api/user.js'
	export default {
		components: {
			Navbar,
			Loading
		},
		data() {
			return {
				id: '',
				mvDetail: {
					src: '',
					subCount: 0,
					commentCount: 0,
					shareCount: 0,
					artists: [{
						img1v1Url: '',
						followed: ''
					}]
				},
				videoStatus: 'playing',
				currentTime: 0,
				controls: false,
				playingProgress: 0,
				showSubTitle: false,
				isCollceted : false	//是否收藏了mv
			}
		},
		computed: {
			...mapState(['screenHeight', 'pixelRatio'])
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(data) {
			this.id = data.id
			getMVUrl(this.id).then(res => {
				this.mvDetail.src = res.data.url
			})
			getMVDetail(this.id).then(res => {
				Object.assign(this.mvDetail, res.data)
				this.mvDetail.liked = false
				this.isCollceted = false
				this.changeMusicPlayStatus(false)	//播放视频前先暂停歌曲
				this.videoContext.play()
			})
		},
		methods: {
			...mapMutations(['changeMusicPlayStatus']),
			// 播放与暂停
			playVideo() {
				if(this.videoStatus == 'playing') {
					this.videoContext.pause()
					this.videoStatus = 'paused'
				} else {
					this.videoContext.play()
					this.videoStatus = 'playing'
				}
			},
			// 视频播放进度更新
			timeupdate(e) {
				this.currentTime =  parseInt(e.detail.currentTime)
				this.playingProgress = (this.currentTime / (this.mvDetail.duration/1000)) * 100
			},
			// 播放进度条被人为改变时触发
			changeSilder() {
				let seekTime = parseInt(this.playingProgress * this.mvDetail.duration / 100000)
				this.videoContext.seek(seekTime)
			},
			// 进入全屏
			fullScreen() {
				this.videoContext.requestFullScreen()
			},
			// 进入/退出全屏时触发
			fullscreenchange(e) {
				this.controls = e.detail.fullScreen ? true : false
			},
			// 关注用户
			attention() {
				followSinger(this.mvDetail.artists[0].id,1).then(res => {
					this.mvDetail.artists[0].followed = true
					uni.showToast({
						title: '已关注歌手',
						icon: 'none'
					})
				})
				
			},
			// 跳转评论
			toComment() {
				uni.navigateTo({
					url: `/pages/music/comments?type=mv&id=${this.id}`
				})
			},
			// 点赞/取消点赞
			prise() {
				priseResource(this.mvDetail.id, this.mvDetail.liked ? 0 : 1, 1).then(res => {
					this.mvDetail.liked = !this.mvDetail.liked
					this.mvDetail.liked ? this.mvDetail.subCount ++ : this.mvDetail.subCount --
				})
			},
			// 分享
			share() {
				uni.showToast({
					title: '缺少各平台账号，暂时无法开发',
					icon: 'none'
				})
			},
			// 收藏/取消收藏
			collectMv() {
				collectMv(this.mvDetail.id, this.isCollceted ? 0 : 1).then(res => {
					this.isCollceted = !this.isCollceted
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: #000!important;
	}
	
	.videoBox {
		position: absolute;
		bottom: 700rpx;
		width: 750rpx;
		.video {
			width: 750rpx;
			.videoCover {
				width: 100%;
				height: 100%;
			}
			.coverBtn {
				position: relative;
				left: 250rpx;
				width: 250rpx;
				height: 250rpx;
				opacity: 0.7;
			}
			.fullScreen {
				position: relative;
				left: 650rpx;
				width: 40rpx;
				height: 40rpx;
				opacity: 0.7;
			}
		}
	}
	
	.detail {
		display: flex;
		position: absolute;
		bottom: 110rpx;
		width: 750rpx;
		height: 600rpx;
		.left {
			display: flex;
			flex-direction: column-reverse;
			width: 600rpx;
			height: 600rpx;
			padding-left: 30rpx;
			.creator {
				display: flex;
				align-items: center;
				height: 80rpx;
				width: 570rpx;
				text {
					color: #fff;
					font-size: 33rpx;
					font-weight: bolder;
				}
				image {
					height: 80rpx;
					width: 80rpx;
					border-radius: 40rpx;
					margin-right: 8px;
				}
				.attention {
					width: 60rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					border-radius: 20rpx;
					margin-left: 10rpx;
					background-color: $cloudMusic-theme-color;
					text {
						color: #FFFFFF;
						font-size: 34rpx;
						font-weight: bolder;
					}
				}
			}
			.title {
				width: 570rpx;
				margin: 20rpx 0;
				.t1 {
					display: flex;
					align-items: center;
					width: 570rpx;
					color: #fff;
					font-size: 28rpx;
					font-weight: 600;
					text {
						width: 540rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #fff;
					}
					image {
						width: 30rpx;
					}
				}
				.t2 {
					width: 570rpx;
					color: #ccc;
					font-size: 24rpx;
				}
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: 150rpx;
			height: 600rpx;
			.right-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 100rpx;
				color: #fff;
				image {
					width: 60rpx;
				}
			}
		}
	}
	
	.playingProgress {
		position: absolute;
		left: 0;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 50rpx;
		font-size: 22rpx;
		color: #fff;
	
		.slider {
			width: 530rpx;
		}
	
		text {
			width: 50rpx;
			margin: 0 30rpx;
	
			&:last-child {
				color: #ccc;
			}
		}
	}
</style>
